<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仁爱宠物医院</title>
  <link rel="stylesheet" href="../css/home.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  #slide {
    width: 100%;
    height: 400px;
    position: relative;
  }

  #slide li {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s;
  }

  #slide li.active {
    opacity: 1;
  }

  .shop_div {
    width: 90%;
    background-color: #fff;
    overflow: hidden;
    border-radius: 15px;
    padding-bottom: 5%;
  }
</style>

<body>
  <div id="shop">
    <!-- 页面头部 -->
    <header>
      <div style="display: flex;">
        <div class="container">
          <div class="row">
            <div class="col-lg-1" style="text-align: right;">
              <img src="../img/cat-foot.svg" height="40px" width="40px" />
            </div>
            <div class="col-lg-2" style="padding: 0;text-align: left;color: #ff5b2e;padding-top: 3px;">
              <h3 style="font-weight: 700; font-family: 得意黑;">仁爱宠物医院</h3>
            </div>
            <div class="col-lg-7">
              <ul style="font-family: 得意黑;">
                <li class="li_header"><a class="a_header" href="./home.html">首页</a></li>
                <li class="li_header"><a class="a_header" href="./about.html">关于仁爱</a></li>
                <li class="li_header"><a class="a_header" href="./service.html">服务项目</a></li>
                <li class="li_header"><a class="a_header" href="./keep_a_pet.html">养宠小百科</a></li>
                <li class="li_header"><a class="a_header" href="./join_us.html">加入我们</a></li>
                <li class="li_header"><a class="a_header" href="./shop.html">线上商店</a></li>
                <li class="li_header"><a class="a_header" href="./message.html">在线留言</a></li>
                <li id="li_1" class="li_header"><a class="a_header" href="./login.html">登录/注册</a></li>
                <li id="li_2" class="li_header"><a class="a_header" href="./userinfo.html">个人中心</a></li>
              </ul>
            </div>
            <div class="col-lg-2" style="text-align: left;overflow: hidden; position: relative;">
              <input type="text" style="margin-top: 8px;" v-model="name">
              <img @click="search()" src="../img/search.png" alt="" width="23px" height="23px"
                style="position: absolute; top: 11px; left: 135px; cursor: pointer;">
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- 一 -->
    <section style="position: relative;">
      <div>
        <ul id="slide">
          <li class="active"><img src="../img/shop_banner1.jpg" width="100%" height="100%" alt=""></li>
          <li><img src="../img/shop_banner2.jpg" width="100%" height="100%" alt=""></li>
          <li><img src="../img/shop_banner3.jpg" width="100%" height="100%" alt=""></li>
        </ul>
      </div>
    </section>
    <!-- 二 -->
    <section style="padding-top: 2%; padding-bottom: 3%;">
      <div class="container">
        <div class="tab">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部分类" name="全部分类" value="全部分类">
              <div class="row">
                <div class="col-lg-4" style="margin-top: 3%;" v-for="item in tableData" :key="item.id">
                  <div class="shop_div" @click="GoodsInfo(item.id)">
                    <img :src="url+'/download/'+item.img" alt="" width="100%">
                    <div style="display: flex; margin-top: 10px; padding-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                    </div>
                    <div style="padding-left: 10px; margin-top: 3%; padding-right: 10px;">
                      <h6 style="font-weight: 600;">{{item.name}}</h6>
                      <span style="font-size: 14px;">
                        {{item.notes}}</span>
                      <h4 style="color: red; margin-top: 2%;">{{item.price}}￥</h4>
                    </div>
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="睡垫" name="睡垫" value="睡垫">
              <div class="row">
                <div class="col-lg-4" style="margin-top: 3%;" v-for="item in tableData" :key="item.id">
                  <div class="shop_div" @click="GoodsInfo(item.id)">
                    <img :src="url+'/download/'+item.img" alt="" width="100%">
                    <div style="display: flex; margin-top: 10px; padding-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                    </div>
                    <div style="padding-left: 10px; margin-top: 3%; padding-right: 10px;">
                      <h6 style="font-weight: 600;">{{item.name}}</h6>
                      <span style="font-size: 14px;">
                        {{item.notes}}</span>
                      <h4 style="color: red; margin-top: 2%;">{{item.price}}￥</h4>
                    </div>
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="玩具" name="玩具" value="玩具">
              <div class="row">
                <div class="col-lg-4" style="margin-top: 3%;" v-for="item in tableData" :key="item.id">
                  <div class="shop_div" @click="GoodsInfo(item.id)">
                    <img :src="url+'/download/'+item.img" alt="" width="100%">
                    <div style="display: flex; margin-top: 10px; padding-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                    </div>
                    <div style="padding-left: 10px; margin-top: 3%; padding-right: 10px;">
                      <h6 style="font-weight: 600;">{{item.name}}</h6>
                      <span style="font-size: 14px;">
                        {{item.notes}}</span>
                      <h4 style="color: red; margin-top: 2%;">{{item.price}}￥</h4>
                    </div>
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="衣服" name="衣服" value="衣服">
              <div class="row">
                <div class="col-lg-4" style="margin-top: 3%;" v-for="item in tableData" :key="item.id">
                  <div class="shop_div" @click="GoodsInfo(item.id)">
                    <img :src="url+'/download/'+item.img" alt="" width="100%">
                    <div style="display: flex; margin-top: 10px; padding-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                    </div>
                    <div style="padding-left: 10px; margin-top: 3%; padding-right: 10px;">
                      <h6 style="font-weight: 600;">{{item.name}}</h6>
                      <span style="font-size: 14px;">
                        {{item.notes}}</span>
                      <h4 style="color: red; margin-top: 2%;">{{item.price}}￥</h4>
                    </div>
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="项圈" name="项圈" value="项圈">
              <div class="row">
                <div class="col-lg-4" style="margin-top: 3%;" v-for="item in tableData" :key="item.id">
                  <div class="shop_div" @click="GoodsInfo(item.id)">
                    <img :src="url+'/download/'+item.img" alt="" width="100%">
                    <div style="display: flex; margin-top: 10px; padding-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                    </div>
                    <div style="padding-left: 10px; margin-top: 3%; padding-right: 10px;">
                      <h6 style="font-weight: 600;">{{item.name}}</h6>
                      <span style="font-size: 14px;">
                        {{item.notes}}</span>
                      <h4 style="color: red; margin-top: 2%;">{{item.price}}￥</h4>
                    </div>
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="沐浴露" name="沐浴露" value="沐浴露">
              <div class="row">
                <div class="col-lg-4" style="margin-top: 3%;" v-for="item in tableData" :key="item.id">
                  <div class="shop_div" @click="GoodsInfo(item.id)">
                    <img :src="url+'/download/'+item.img" alt="" width="100%">
                    <div style="display: flex; margin-top: 10px; padding-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                    </div>
                    <div style="padding-left: 10px; margin-top: 3%; padding-right: 10px;">
                      <h6 style="font-weight: 600;">{{item.name}}</h6>
                      <span style="font-size: 14px;">
                        {{item.notes}}</span>
                      <h4 style="color: red; margin-top: 2%;">{{item.price}}￥</h4>
                    </div>
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="零食" name="零食" value="零食">
              <div class="row">
                <div class="col-lg-4" style="margin-top: 3%;" v-for="item in tableData" :key="item.id">
                  <div class="shop_div" @click="GoodsInfo(item.id)">
                    <img :src="url+'/download/'+item.img" alt="" width="100%">
                    <div style="display: flex; margin-top: 10px; padding-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                    </div>
                    <div style="padding-left: 10px; margin-top: 3%; padding-right: 10px;">
                      <h6 style="font-weight: 600;">{{item.name}}</h6>
                      <span style="font-size: 14px;">
                        {{item.notes}}</span>
                      <h4 style="color: red; margin-top: 2%;">{{item.price}}￥</h4>
                    </div>
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="猫包" name="猫包" value="猫包">
              <div class="row">
                <div class="col-lg-4" style="margin-top: 3%;" v-for="item in tableData" :key="item.id">
                  <div class="shop_div" @click="GoodsInfo(item.id)">
                    <img :src="url+'/download/'+item.img" alt="" width="100%">
                    <div style="display: flex; margin-top: 10px; padding-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                      <img src="../img/pingfen.svg" alt="" width="25px" style="margin-left: 5px;">
                    </div>
                    <div style="padding-left: 10px; margin-top: 3%; padding-right: 10px;">
                      <h6 style="font-weight: 600;">{{item.name}}</h6>
                      <span style="font-size: 14px;">
                        {{item.notes}}</span>
                      <h4 style="color: red; margin-top: 2%;">{{item.price}}￥</h4>
                    </div>
                  </div>
                </div>
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                  @current-change="currentPage" :page-size="6">
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </section>
    <!-- 页尾 -->
    <footer style="background-color: #2f2d53;height: 350px; overflow: hidden; padding-top: 5%;">
      <div class="container">
        <div style="display: flex; padding-left: 20%;">
          <div style="width: 35%;">
            <div style="display: flex;">
              <div style="text-align: right;">
                <img src="../img/cat-foot.svg" height="40px" width="40px" />
              </div>
              <div style="padding: 0;text-align: left;color: #ff5b2e;padding-top: 3px;">
                <h3 style="font-weight: 700; font-family: 得意黑;">仁爱宠物医院</h3>
              </div>
            </div>
            <div style="color: #fff; margin-top: 5%;">
              <span>
                宠物护理和兽医服务对于维持<br>我们心爱的动物伴侣的健康和福祉至关重要
              </span>
            </div>
          </div>
          <div style="display: flex; width: 65%;">
            <div style="overflow: hidden; margin-left: 15%;">
              <h4 style="color: #fff;">快速链接</h4><br>
              <h6><a style="color: #fff !important;" href="./about.html">关于我们</a></h6><br>
              <h6><a style="color: #fff !important;" href="./service.html">服务项目</a></h6><br>
              <h6><a style="color: #fff !important;" href="./service.html">线上商店</a></h6>
            </div>
            <div style="overflow: hidden; margin-left: 15%;">
              <h4 style="color: #fff;">法律</h4><br>
              <h6 style="color: #fff;">常见问题</h6><br>
              <h6 style="color: #fff;">条款及细则</h6><br>
              <h6 style="color: #fff;">隐私与政策</h6>
            </div>
          </div>
        </div>
        <span style="color: #fff; display: block; text-align: center; font-size: 14px; margin-top: 2%;">©2024年
          版权所有仁爱宠物医院</span>
      </div>
    </footer>
  </div>
</body>
<script>
  // ----------------

  // 轮播图
  let slide = document.getElementById('slide');
  let slideList = slide.querySelectorAll('li');
  let node = null;
  let index = 0;
  let timer = setInterval(function () {
    if (node != null) node.className = "";
    index = index >= slideList.length - 1 ? 0 : index + 1;
    slideList[index].className = "active";
    node = slideList[index];
  }, 5000)
</script>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {
    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
    }
  }
</script>
<script>
  new Vue({
    el: '#shop',
    data() {
      return {
        activeName: '全部分类',
        url: 'http://localhost:8082/common',
        current: 1,
        total: 1,
        name: '',
        tableData: []
      };
    },
    created() {
      if (localStorage.getItem("name")) {
        this.name = localStorage.getItem("name");
      }
      this.page_init();
    },
    methods: {
      GoodsInfo(id) {
        localStorage.removeItem("goodsId");
        localStorage.setItem("goodsId", id);
        // 跳转页面
        window.location.href = './goodsInfo.html';
      },
      // 当切换页面时调用
      currentPage(val) {
        this.current = Number(val);
        this.page_init();
      },
      // 页面初始化
      async page_init() {
        this.tableData = [];
        if (this.activeName == "全部分类") {
          if (this.name != "") {
            const { data: result } = await this.$http.get("http://localhost:8082/goods/search/" + this.name + "/" + this.current);
            if (result.flag) {
              // 数据
              this.tableData = result.list;
              // 当前页
              this.current = result.current;
              // 总条数
              this.total = result.total;
            } else {
              this.$message.info(result.message);
            }
            // 清空数据
            this.name = "";
          } else {
            const { data: result } = await this.$http.get("http://localhost:8082/goods/page/" + this.current);
            if (result.flag) {
              // 数据
              this.tableData = result.list;
              // 当前页
              this.current = result.current;
              // 总条数
              this.total = result.total;
            } else {
              this.$message.info(result.message);
            }
          }
        } else {
          const { data: result } = await this.$http.get("http://localhost:8082/goods/queryType/" + this.activeName + "/" + this.current);
          if (result.flag) {
            // 数据
            this.tableData = result.list;
            // 当前页
            this.current = result.current;
            // 总条数
            this.total = result.total;
          } else {
            this.$message.info(result.message);
          }
        }
      },
      // 当点击分类时调用
      handleClick(el) {
        this.activeName = el.$attrs.value;
        this.page_init();
      },
      search() {
        localStorage.setItem("name", this.name);
        window.location.href = './shop.html'
      }
    }
  })

</script>

</html>